/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="page">
		<form @submit="formSubmit" class="form">
			<view class="formContent">
				<view class="header">
					<u-image class="logoSrc" border-radius="300" :src="logoSrc" width="100" height="100"></u-image>
					<h2 class="mainTit">{{$t('欢迎注册')}}{{AppName}}</h2>
					<h3 class="subTit">{{$t('开心购物 快乐生活')}}</h3>
				</view>
				<view class="formItem">
					<view class="area">+86</view>
					<input type="number" class="input phone" name="phone" :placeholder="$t('请输入手机号')" v-model="phone">
				</view>
				<view class="formItem">
					<input type="text" class="input" name="code" :placeholder="$t('请输入验证码')" v-model="code">
					<view class="sendCode btn-color" v-if="showTime">{{time}}s{{$t('后重新获取')}}</view>
					<view class="sendCode btn-color" @click="getCode()" hover-class="text-hover" v-else>{{$t('获取验证码')}}</view>
				</view>
				<view class="formItem">
					<input type="password" class="input" name="pwd" :placeholder="$t('请输入密码')" v-model="password">
				</view>
				<agreement @changeAgree="changeAgree"></agreement>
				<view class="formButton">
					<button formType="submit" class="button" hover-class="text-hover">{{$t('立即注册')}}</button>
				</view>
				<view class="u-flex u-row-center u-m-t-30">
					<view @click="$u.route('/pagesB/login/smsLogin')" hover-class="text-hover"
						:style="{color:$u.color['tipsColor']}">{{$t('短信验证码登录')}}</view>
				</view>
			</view>
		</form>
		<thirdLogin></thirdLogin>
	</view>
</template>

<script>
	import graceChecker from "../../api/graceChecker.js"
	import agreement from '@/pagesB/components/agreement';
	import thirdLogin from '@/pagesB/components/thirdLogin';

	export default {
		components: {
			agreement,
			thirdLogin
		},
		data() {
			return {
				phone: '', //手机号
				code: '', //验证码
				password: '', //密码
				agreement: false, //是否同意协议
				timer: null, //定时器
				isClick: true, //避免用户重复点击
				time: 60, //60s后重置
				showTime: false, //时间与获取验证码切换
				parmas: null, //绑定手机号需要的参数
				providerList: [],
				isWechatShow: false,
				register_client:'',//客户端环境
				icons: [{
					wechatSrc: '',
				}],
				logoSrc: this.STATICURL + 'images/logo/logoWoshop300.png',
				setshareUserId: '',
				delSrc: ''
			}
		},
		onLoad(option) {
			this.setshareUserId = this.$store.state.shareUserId;
			this.AppName = this.$AppName
			this.getCid();
			// #ifdef APP-PLUS
				switch(uni.getSystemInfoSync().platform){
				    case 'android':
				       this.register_client='app_android'
				       break;
				    case 'ios':
				       this.register_client='app_ios'
				       break;
			}
			// #endif
			// #ifdef H5
				this.register_client = 'H5'
			//#endif
			uni.getProvider({
				service: 'oauth',
				success: (e) => {
					// console.log('oauth..........');
					this.providerList = e.provider.map((value) => {
						let providerName = '';
						switch (value) {
							case 'weixin':
								providerName =  this.$t('微信登录')
								break;
							case 'qq':
								providerName = this.$t('QQ登录')
								break;
							case 'sinaweibo':
								providerName = this.$t('新浪微博登录')
								break;
							case 'xiaomi':
								providerName = this.$t('小米登录')
								break;
							case 'baidu':
								providerName = this.$t('百度登录')
								break;
							case 'alipay':
								providerName = this.$t('支付宝登录')
								break;
						}
						return {
							name: providerName,
							id: value
						}
					})
				},
				fail: (e) => {
					console.log("获取登录通道失败", e);
				}
			});
			
		},
		methods: {
			changeAgree(e) {
				this.agreement = e;
				console.log(this.agreement)
			},
			getCid() {
				// #ifdef APP-PLUS
				//从缓存中取cid值，如果取到就不调取接口获取
				var t1 = setInterval(() => {
					var info = plus.push.getClientInfo();
					console.log(JSON.stringify(info))
					var cid = info.clientid;
					console.log(cid);
					var token = info.token;
					console.log('aaaaaaaaaa');
					console.log(token);

					if (cid && token) {
						uni.setStorageSync("devicetoken", cid);
						console.log("存储成功");
						console.log(`devicetoken:${uni.getStorageSync("devicetoken")}`);
						this.devicetoken = uni.getStorageSync("devicetoken");
						clearInterval(t1);
					}
				}, 2000)
				// #endif
			},
			formSubmit(e) {
				var rule = [{
						name: "phone",
						checkType: "phoneno",
						checkRule: "11",
						errorMsg: this.$t('手机格式不正确')
					},
					{
						name: "code",
						checkType: "notnull",
						checkRule: "",
						errorMsg: this.$t('请输入验证码')
					},
					{
						name: "pwd",
						checkType: "string",
						checkRule: "4,16",
						errorMsg: this.$t('输入4-16位密码')
					},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					if (!this.agreement) {
						this.$toast(this.$t('请勾选协议'))
						return false;
					}
					this.$loading()
					this.$http.getRegister({
						phone: this.phone,
						password: this.password,
						phonecode: this.code,
						repwd: this.password,
						xieyi: 1,
						register_client:this.register_client,
						setshareUserId: this.setshareUserId,
					}).then((res) => {
						if (res.status == 200) {
							this.$toast(res.mess);
							setTimeout(() => {
								this.$u.route('/pagesB/login/login');
							}, 1500);
						}
					}).catch((err) => {
						console.log(err);
					})
					//
				} else {
					this.$toast(graceChecker.error)
				}
			},
			// 判断是否开启第三方登录
			getThirdLogin() {
				this.$http.getThirdLogin().then((res) => {
					if (res.status == 200) {
						this.isWechatShow = res.data.open
					}
				})
			},
			// 获取验证码
			getCode() {
				if (this.isClick) {
					if (this.phone.length != 11) {
						return this.$toast(this.$t('手机格式不正确'))
					}
					this.$loading()
					this.$http.getSmsCode({
						phone: this.phone,
						type: 1,
					}).then((res) => {
						if (res.status == 200) {
							this.showTime = true;
							this.$toast(res.mess)
							this.timer = setInterval(() => {
								this.isClick = false;
								this.time = this.time - 1;
								if (this.time <= 0) {
									this.isClick = true;
									this.time = 60;
									this.showTime = false;
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000)
						}

					})
				}
			},

			// 跳转
			goTo(path) {
				this.$navigateTo(path);
			}
		},
		// 页面卸载
		onUnload() {
			this.isClick = true;
			this.time = 60;
			// 清空定时器
			clearInterval(this.timer);
			this.timer = null;
		},

	}
</script>
<style lang="scss" scoped>
	.page {
		background: #ffffff;
		height: 100%;

		.form {
			width: 100%;

			.formContent {
				padding-top: 100rpx;
				padding-left: 70rpx;
				padding-right: 70rpx;

				.backBtn {
					position: absolute;
					right: 70rpx;

					image {
						width: 54rpx;
						height: 54rpx;

					}
				}

				.header {
					text-align: left;
					margin-bottom: 34rpx;
					margin-top: 100rpx;

					.logoSrc {
						width: 110rpx;
						height: 110rpx;
						border-radius: 200px;
						position: relative;
						box-shadow: 0 0 0 6rpx #ffd0d0, 0 0 0 14rpx #ffefef;
					}

					.mainTit {
						font-size: 48rpx;
						color: #333333;
						margin: 20rpx 0;
					}

					.subTit {
						font-size: 28rpx;
						color: #666;
						font-weight: 200;
					}
				}

				.formItem {
					height: 104rpx;
					border-bottom: 1px solid rgba(238, 238, 238, 1);
					display: flex;
					align-items: center;

					.area {
						font-size: 30rpx;
						color: #333;
						padding-right: 34rpx;
						line-height: 1;
						border-right: 1rpx solid #9B9B9B;
					}

					.sendCode {
						background-color: transparent;
						color: #EC4849;
					}

					input {
						flex: 1;
						font-size: 30rpx;
						font-weight: 400;

						&.phone {
							padding-left: 33rpx;
						}

						&::-webkit-input-placeholder {
							color: rgba(204, 204, 204, 1);
						}
					}
				}

				.formButton {
					margin-top: 60rpx;
					position: relative;
					margin-bottom: 30rpx;

					button {
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 80rpx;
					}
				}

				.agreement {
					font-size: 24rpx;
					color: #999;
					margin-top: 36rpx;
					padding-left: 8rpx;
					padding-bottom: 20rpx;
					display: flex;
					align-items: center;

					image {
						margin-right: 4rpx;
						width: 25rpx;
						height: 25rpx;
					}

				}
			}

		}

		.other-login {
			margin-top: 70rpx;
			text-align: center;

			.title {
				color: #999999;
			}

			.wrap {
				display: flex;
				justify-content: center;
				margin-top: 30rpx;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.icon-otherLogin {
						width: 55rpx;
						height: 27rpx;
					}
				}
			}
		}
	}
</style>
